<template>
  <view class="partner-select-container">
    <view class="page-header">
      <text class="header-title">🤝 选择打卡搭子</text>
    </view>
    
    <view class="partner-banner">
      <text class="banner-text">👨‍💻 与搭子一起坚持，互相监督 👩‍💻</text>
    </view>
    
    <view class="partner-list">
      <view 
        v-for="(partner, index) in partners" 
        :key="index" 
        class="partner-item"
        @tap="selectPartner(partner)"
        :class="{'partner-item-active': selectedPartnerId === partner.id}"
      >
        <view class="partner-avatar">
          <image :src="partner.avatar" mode="aspectFill"></image>
        </view>
        <view class="partner-info">
          <view class="partner-name-row">
            <text class="partner-name">{{partner.name}}</text>
            <text class="partner-badge">{{partner.badge}}</text>
          </view>
          <text class="partner-desc">{{partner.description}}</text>
          <view class="partner-stats">
            <text class="partner-stat">🔥 {{partner.streak}}天连续打卡</text>
            <text class="partner-stat">⏱️ {{partner.dailyHours}}小时/天</text>
          </view>
        </view>
        <view class="partner-select">
          <text class="select-icon">选择</text>
        </view>
      </view>
    </view>
    
    <view class="no-partner" v-if="partners.length === 0">
      <image class="empty-image" src="/static/images/empty-state.png" mode="aspectFit"></image>
      <text class="empty-text">您还没有打卡搭子 😢</text>
      <text class="empty-desc">邀请一个搭子一起学习吧！互相监督，效率更高 ✨</text>
      <button class="invite-btn" @tap="invitePartner">✉️ 邀请搭子</button>
    </view>
    
    <view class="action-buttons" v-if="partners.length > 0">
      <button class="checkin-btn" @tap="checkInWithSelected">✅ 开始打卡</button>
      <button class="invite-more-btn" @tap="invitePartner">+ 邀请更多搭子</button>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue';

// 选中的搭子ID
const selectedPartnerId = ref(null);

// 模拟的搭子数据
const partners = ref([
  {
    id: 1,
    name: '小七',
    avatar: '/static/my/男孩.png',
    description: '擅长数学，目标考研数学130+',
    badge: '数学王者',
    streak: 28,
    dailyHours: 8
  },
  {
    id: 2,
    name: '小红',
    avatar: '/static/my/头像 女孩.png',
    description: '英语专业，目标考研英语85+',
    badge: '英语达人',
    streak: 15,
    dailyHours: 6
  },
  {
    id: 3,
    name: '小李',
    avatar: '/static/my/男孩.png',
    description: '政治学习中，擅长背诵和理解',
    badge: '政治先锋',
    streak: 21,
    dailyHours: 7
  }
]);

// 选择搭子
const selectPartner = (partner) => {
  selectedPartnerId.value = partner.id;
};

// 与选中的搭子打卡
const checkInWithSelected = () => {
  if (!selectedPartnerId.value) {
    uni.showToast({
      title: '请先选择一个搭子',
      icon: 'none'
    });
    return;
  }
  
  const selectedPartner = partners.value.find(p => p.id === selectedPartnerId.value);
  uni.navigateTo({
    url: `/pages/partner/check-in?partnerId=${selectedPartner.id}&partnerName=${selectedPartner.name}`
  });
};

// 邀请搭子
const invitePartner = () => {
  uni.navigateTo({
    url: '/pages/partner/invite'
  });
};
</script>

<style>
.partner-select-container {
  padding: 30rpx;
  background-color: #f8f8f8;
  min-height: 100vh;
}

.page-header {
  padding: 20rpx 0;
  margin-bottom: 20rpx;
}

.header-title {
  font-size: 40rpx;
  font-weight: bold;
  color: #333;
}

.partner-banner {
  background: linear-gradient(135deg, #A8BF8F 0%, #7A9D6E 100%);
  padding: 30rpx;
  border-radius: 15rpx;
  margin-bottom: 30rpx;
  box-shadow: 0 4rpx 12rpx rgba(168, 191, 143, 0.3);
}

.banner-text {
  color: white;
  font-size: 30rpx;
  text-align: center;
  font-weight: 500;
}

.partner-list {
  margin-top: 30rpx;
}

.partner-item {
  display: flex;
  align-items: center;
  padding: 30rpx;
  margin-bottom: 25rpx;
  background-color: #fff;
  border-radius: 15rpx;
  box-shadow: 0 4rpx 15rpx rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
  border: 2rpx solid transparent;
}

.partner-item-active {
  border: 2rpx solid #A8BF8F;
  background-color: rgba(168, 191, 143, 0.1);
  transform: translateY(-2rpx);
  box-shadow: 0 6rpx 20rpx rgba(0, 0, 0, 0.12);
}

.partner-avatar {
  width: 120rpx;
  height: 120rpx;
  border-radius: 50%;
  overflow: hidden;
  margin-right: 25rpx;
  border: 4rpx solid #A8BF8F;
}

.partner-avatar image {
  width: 100%;
  height: 100%;
}

.partner-info {
  flex: 1;
}

.partner-name-row {
  display: flex;
  align-items: center;
  margin-bottom: 10rpx;
}

.partner-name {
  font-size: 34rpx;
  font-weight: bold;
  color: #333;
  margin-right: 15rpx;
}

.partner-badge {
  font-size: 22rpx;
  background-color: #A8BF8F;
  color: white;
  padding: 4rpx 12rpx;
  border-radius: 20rpx;
}

.partner-desc {
  font-size: 28rpx;
  color: #666;
  margin-bottom: 15rpx;
  line-height: 1.4;
}

.partner-stats {
  display: flex;
  flex-wrap: wrap;
}

.partner-stat {
  font-size: 24rpx;
  color: #888;
  margin-right: 20rpx;
  display: flex;
  align-items: center;
}

.partner-select {
  background-color: #A8BF8F;
  padding: 12rpx 25rpx;
  border-radius: 30rpx;
  box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.1);
}

.select-icon {
  color: white;
  font-size: 28rpx;
  font-weight: 500;
}

.no-partner {
  text-align: center;
  margin-top: 100rpx;
  padding: 50rpx;
  background-color: white;
  border-radius: 15rpx;
  box-shadow: 0 4rpx 15rpx rgba(0, 0, 0, 0.08);
}

.empty-image {
  width: 200rpx;
  height: 200rpx;
  margin-bottom: 30rpx;
}

.empty-text {
  font-size: 34rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 15rpx;
  display: block;
}

.empty-desc {
  font-size: 28rpx;
  color: #666;
  margin-bottom: 30rpx;
  display: block;
  line-height: 1.5;
}

.invite-btn {
  margin-top: 30rpx;
  background-color: #A8BF8F;
  color: white;
  font-size: 30rpx;
  padding: 20rpx 0;
  border-radius: 40rpx;
  font-weight: 500;
  box-shadow: 0 4rpx 10rpx rgba(168, 191, 143, 0.4);
}

.action-buttons {
  margin-top: 50rpx;
  display: flex;
  flex-direction: column;
}

.checkin-btn {
  background-color: #A8BF8F;
  color: white;
  font-size: 32rpx;
  padding: 25rpx 0;
  border-radius: 40rpx;
  font-weight: 500;
  margin-bottom: 20rpx;
  box-shadow: 0 4rpx 10rpx rgba(168, 191, 143, 0.4);
}

.invite-more-btn {
  background-color: white;
  color: #A8BF8F;
  font-size: 30rpx;
  padding: 20rpx 0;
  border-radius: 40rpx;
  font-weight: 500;
  border: 2rpx solid #A8BF8F;
}
</style>